`<template>
    <div>
        <van-swipe :autoplay="2000" id="swipe">
            <van-swipe-item  v-for="(item,index) in treeData" :key="index">
                <div class="clearfix swipe-box">
                    <!-- <img :src="$imgPath(image[index])" /> -->
                    <img :src="$imgPath(image[index])" />
                    <span class="dispaly-block font-4 color-3 text-align-c">{{item.name}}</span>
                    <span class="dispaly-block font-28 color-6 text-align-c">{{item.child[0].name}}</span>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div class="login-type">
            <div class="login-type-box position-r">
                <span class="login-xz font-24 text-align-c">请选择登陆方式</span>
                <van-row type="flex" justify="center" class="row-middon">
                    <van-col span="6">
                        <router-link tag="div" :to="{name:'login'}">
                            <img class="login-icon" src="../assets/image/icon_phone.png" alt="" srcset="">
                            <span class="dispaly-block font-24 text-align-c login-name">手机登陆</span>
                        </router-link>
                    </van-col>
                    <van-col span="6">
                        <router-link tag="div" :to="{name:'login'}">
                            <img class="login-icon" src="../assets/image/icon_wx.png" alt="" srcset="">
                            <span class="dispaly-block font-24 text-align-c login-name">微信登陆</span>
                        </router-link>
                    </van-col>
                    <!-- <van-col span="6">
                        <img class="login-icon" src="../assets/image/iocn_qq.png" alt="" srcset="">
                        <span class="dispaly-block font-24 text-align-c login-name">QQ登陆</span>
                    </van-col> -->
                </van-row>
                <div class="text-align-c font-2 login-xy">
                    登录既代表同意<em>《简单竞戈用户协议》</em>
                </div>
            </div>
        </div>
        <span class="sanmiao-bj"></span>
        <span class="sanmiao-bj2 font-24 text-align-c" @click="tiaoguo">跳过{{miao}}s</span>
    </div>
</template>
<script>
    import apiHttp from '../api/index'
export default {
    data(){
        return{
            images: ['','','',''],
            miao:8,
            timer:'',
            treeData:[],
            image:['system/complain/yd1.png','system/complain/yd2.png','system/complain/yd3.png','system/complain/yd4.png']
        }
    },
    created(){
    },
    mounted(){
        debugger
        if(localStorage.getItem('guidePath') == true){
            this.$router.push({
                path:'/index'
            })
        }else{
            localStorage.setItem('guidePath',true)
        }
        this.timer = setInterval(()=>{
            this.dumiao()
        },1000)
        this.listByGroupCodeFortTree() 
        
    },
    methods:{
        dumiao(){
            if(this.miao==0){
                this.$router.push({
                    path:'/index'
                })
            }else{
                this.miao--
            }
        },
        tiaoguo(){
            this.$router.push({
                path:'/index'
            })
        },
        listByGroupCodeFortTree(){
            apiHttp.apiIndex.listByGroupCodeFortTree('',resp=>{
                if(resp.code==200){
                    this.treeData=resp.data;
                }
            })
        },
        
    },
    destroyed(){
        clearInterval(this.timer)
    }
}
</script>
<style scoped>
#swipe{
    margin-bottom: 1rem;
}
.sanmiao-bj{
    position: absolute;
    right: .4rem;
    top: .4rem;
    background-color: #000;
    opacity: .3;
    width: 2rem;
    height: .8rem;
    border-radius: .6rem;
    z-index: 99;
}
.sanmiao-bj2{
    position: absolute;
    right: .4rem;
    top: .4rem;
    width: 2rem;
    height: .8rem;
    z-index: 100;
    color: #fff;
    line-height: .8rem;
}
.swipe-box{
    padding-bottom: 1rem;
    width: 100%;
    height: 100%;
}
.swipe-box img{
    height: 16rem;
}
.van-swipe__indicator--active{
    background-color: #D74D4D;
}
.login-type{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #D74D4D;
    width: 100%;
    height: 7.2rem;
}
.login-type-box{
    width: 100%;
    height: 100%;
}
.login-xz{
    color: #fff;
    background-color: #D74D4D;
    position: absolute;
    left: calc(50% - 1.8rem);
    top: -.4rem;
    width: 3.6rem;
    padding: .2rem .4rem;
    border-radius: .4rem;
}
.login-icon{
    width: 60%;
    display: block;
    margin: 0 auto;
}
.login-name{
    color:#fff;
    line-height: 1.2rem;
}
.row-middon{
    padding-top: 2rem;
}
.login-xy{
    position: absolute;
    left: 0;
    bottom: .4rem;
    width: 100%;
    opacity: .3;
    color: #fff;
}
</style>

